<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据列表</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="js/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 jQuery -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="text-align: center">
    <h2>数据列表</h2>
    <div class="table-container">
        <table class="table table-hover table-bordered table-striped table-condensed">
            <thead>
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
            </thead>
            <tbody id="resultContainer">
                <!-- 数据行将会在这里填充 -->
            </tbody>
        </table>
    </div>
</div>
<script>
    $(document).ready(function() {
        // 定义一个变量来保存最后一次请求的数据
        var lastData = [];
        // 定义一个函数来更新页面内容
        function updatePageData(responseData) {
            var container = $('#resultContainer');

            // 获取已显示的所有 ID
            var existingIds = lastData.map(item => item.id);

            // 遍历新数据，避免重复
            responseData.forEach(function(data) {
                if (!existingIds.includes(data.id)) {
                    // 添加新的数据
                    var row = `
                <tr id="row-${data.id}">
                    <td>${data.id}</td>
                    <td>${data.username}</td>
                    <td>${data.password}</td>
                </tr>
            `;
                    container.append(row);
                    lastData.push(data);

                    var audio = new Audio('assets/voice.mp3');
                    audio.play();
                }
            });
        }

        // 创建一个SSE连接
        const eventSource = new EventSource('http://localhost:8087/get'); // 后端 SSE 地址
        // 监听事件，处理数据
        eventSource.addEventListener('data', function(event) {
            const qqKey = JSON.parse(event.data);
            updatePageData([qqKey]);
        });
    });
</script>
</body>
</html>
